<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 1000px;height:400px;"></div>


<script src="../../plugins/vue/vue.js"></script>
<script src="../../plugins/axios/axios.min.js"></script>
<script type="text/javascript">


    new Vue({
        el:"#main",

        mounted() {
            this.start();
            console.log(this.option.xAxis.data);
            console.log(this.option.series.data);
        },
        methods:{
            start(){
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                axios({
                    url: '/echart/data2',
                    method: 'post',
                }).then(resp => {
                    console.log(resp);
                    let data1=resp.data.name;
                    let data2=resp.data.number;

                    let option={
                        title: {
                            text: '套餐数量'
                        },
                        tooltip: {},
                        legend: {
                            data: ['数量']
                        },
                        xAxis: {
                            data: data1
                        },
                        yAxis: {},
                        series: [
                            {
                                name: '数量',
                                type: 'bar',
                                data: data2
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                })


            }
        },
    })

</script>
<script src="../../plugins/vue/vue.js"></script>
</body>
</html>